<!-- 终止多笔合约 -->
<template>
	<a-modal v-bind="options" title="终止合约">
		<div class="termination">
			<p class="termination-point-out">
				<ExclamationCircleFilled style="margin-right: 7px" />
				系统检测到该企业存在多笔协议信息,请选择您要终止的合约
			</p>
		</div>
		<vxe-grid ref="grid" v-bind="gridOptions" :data="tableData">
			<template #signDate="{row}">
				<div>{{ row.beginTime }}~{{ row.endTime }}</div>
			</template>
			<template #reserve="{row}">
				<div>{{ rentTypeMap[row.type] }}/{{ discountTypeMap[row.discountType] }}/{{ row.discountScale }}%</div>
			</template>
			<template #action="{row}">
				<a @click="terminationContract(row)">终止合约</a>
			</template>
		</vxe-grid>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, watch, defineComponent, createVNode} from 'vue'
	import {Modal} from 'ant-design-vue'
	import {VxeGridProps} from 'vxe-table'
	import {ExclamationCircleFilled} from '@ant-design/icons-vue'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {cooperationCycleList, terminationCooperation} from '@/api/enterprise-library'
	import {rentTypeMap, discountTypeMap} from '@/constant/enterprise-customers'

	const emits = defineEmits(['update:visible', 'close'])
	const props = defineProps<{
		visible: boolean
		id?: string
		tableData: []
	}>()
	const options = reactive({
		width: 640,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		},
		onOk() {
			console.log(1)
		}
	})

	const gridOptions = reactive<VxeGridProps>({
		height: '400',
		showOverflow: true,
		border: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '合作周期',
				width: 300,
				align: 'center',
				slots: {
					default: 'signDate'
				}
			},
			{
				title: '租金协议价',
				align: 'center',
				slots: {
					default: 'reserve'
				}
			},
			{
				title: '操作',
				align: 'center',
				width: 150,
				slots: {
					default: 'action'
				}
			}
		]
	})
	const grid = ref()
	// const getList = (page?: any) => {
	// 	grid.value.commitProxy(page === 1 ? 'reload' : 'query')
	// }

	const terminationContract = (row: any) => {
		console.log(row)
		Modal.confirm({
			title: () => '确定要终止合约吗?',
			icon: () => createVNode(ExclamationCircleFilled),
			content: () => createVNode('div', {}, '终止合同后,已签约的合同仍享受优惠价格,新签或续签合同将不再享受优惠价格'),
			onOk() {
				terminationCooperation({enterPriseId: props.id, enterTeamWordId: row.id}).finally(() => {
					// getList()
					// grid.value.refreshColumn()
					emits('update:visible', false)
					setTimeout(() => emits('close'), 100)
				})
			},
			onCancel() {
				console.log('Cancel')
			},
			class: 'test'
		})
	}
</script>

<style scoped lang="less">
	.termination {
		width: 100%;
		height: 40px;
		background: #fffbe6;
		border-radius: 2px 2px 2px 2px;
		opacity: 1;
		border: 1px solid #ffe58f;
		margin-bottom: 15px;
		.termination-point-out {
			font-size: 14px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #faad14;
			line-height: 40px;
			padding-left: 23px;
		}
	}
</style>
